<template>
  <view class="content">
    <view class="li_box">
      <view class="li_content">
        <view class="li_label">需求编号</view>
        <view class="li_input">
          <input class="border_input" v-model="obj.requirementNo" disabled type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验员</view>
        <view class="li_input">
          <input class="border_input" v-model="obj.experimenter" disabled type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验助手</view>
        <view class="li_input">
          <picker @change="bindPickerZhu" :value="index" :range="zhu">
          <input class="border_input" v-model="obj.experimentAssistant" disabled type="text" />
        </picker>
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验对象</view>
        <view class="li_input">
          <input class="border_input" v-model="obj.experimentSubject" disabled type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验类别</view>
        <view class="li_input">
          <input class="border_input" v-model="obj.experimentCategory" disabled type="text" />
        </view>
      </view>
      <view class="li_content">
        <view class="li_label">实验阶段</view>
        <view class="li_input">
          <input class="border_input" v-model="obj.experimentStage" disabled type="text" />
        </view>
      </view>
    </view>
    <view class="btn_box">
      <view class="red_btn" @click="dele">删除任务</view>
      <view class="green_btn" @click="editTask">编辑任务</view>
    </view>
  </view>
</template>
<script>
import { taskDel } from '../api/api.js'
export default {
  data() {
    return {
      
      styles: {
        borderColor: "#1a512c",
      },
      obj:{}
    };
  },
  methods:{
    dele(){
      let t = this;
      uni.showModal({
        title: '删除任务',
        content: '是否删除当前任务',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
            taskDel({ids:[t.obj.id]}).then(res=>{
              if(res.data.code==200){
                uni.showToast({
                  title: res.data.msg,
                  duration: 2000
                });
                setTimeout(()=>{
                  uni.navigateBack({
                     delta: 1
                  });
                })
              }else{
                uni.showToast({
                  title:res.data.msg,
                  icon:'none'
                })
              }
            })
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    editTask(){
      uni.navigateTo({
         url: '/pagesExpert/index/taskRelease?flag=edit'
      });
    }

  },
  onShow(){
    this.obj = uni.getStorageSync('expertTaskDetail');
  }
};
</script>
<style lang="scss" scoped>
.pop_box {
  width: 600rpx;
  box-sizing: border-box;
  padding: 20rpx;
  background-color: #e3ede2;
  font-size: 32rpx;
  border-radius: 10rpx;
  color: #1a512c;
  font-weight: 700;
  .pop_title {
    margin-bottom: 20rpx;
  }
  .pop_btn_box {
    margin-top: 40rpx;
    width: 100%;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .back_btn {
      width: 200rpx;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10rpx;
      background-color: #fff;
      color: #1a512c;
      font-weight: 700;
      border: #1a512c 2rpx solid;
    }
    .submit_btn {
      background-color: #1a512c;
      color: #fff;
    }
  }
}
.content {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 30rpx;
  background-color: #e3ede2;
  font-size: 32rpx;
  color: #1a512c;
  .title_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .green_ornament {
      width: 8rpx;
      height: 30rpx;
      background-color: #1a512c;
      margin-right: 20rpx;
    }
  }
  .li_box {
    margin-top: 20rpx;
    
  }
}
.li_content {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  .li_label {
    font-weight: 700;
    margin-right: 30rpx;
    width: 20%;
  }
  .li_input {
    width: 80%;
    .border_input {
      border: 2rpx solid #1a512c;
      border-radius: 10rpx;
      height: 50rpx;
      width: 100%;
      text-align: center;
    }
  }
}
.textarea_border {
  margin-top: 20rpx !important;
  height: 200rpx !important;
}
.btn_box {
  color: #fff;
  font-size: 34rpx;
  font-weight: 700;
  width: 100%;
  height: 100rpx;
  margin-top: 40rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .red_btn {
    background-color: #d93434;
    // background-color: #fff;
    // border: #1a512c 2rpx solid;
    border-radius: 10rpx;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 300rpx;
  }
  .green_btn {
    background-color: #1b9c46;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 300rpx;
  }
}
.card_tag_green {
  background-color: #1b9c46;
  color: #fff;
  padding: 10rpx 26rpx;
  font-size: 24rpx;
  border-radius: 8rpx;
}
.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.rect {
		width: 90vw;
		height: 40vh;
		background-color: #fff;
    border-radius: 5px;
    padding: 10px 0 10px 0;
    overflow-y: scroll;
	}
  .li_boxs {
    width: 90vw;
    padding: 20rpx;
    box-sizing: border-box;
    .card_green_box {
      padding: 20rpx;
      background-color: #b9e2c7;
      color: #1b9c46;
      border-radius: 10rpx;
      font-size: 28rpx;
      .card_title_box {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10rpx;
        font-weight: 700;
        .card_tag_green {
          background-color: #1b9c46;
          color: #fff;
          padding: 5px 8px;
          font-size: 24rpx;
          border-radius: 8rpx;
        }
      }
      .card_li_box {
        margin-bottom: 10rpx;
        font-weight: 700;
      }
    }
  }
</style>
